<template>
  <div class="menu-wrapper">
    <template v-for="(item, index) in menu">
      <el-submenu :index="item.id" :show-timeout="500" :hide-timeout="500">
        <template slot="title">
          <!--          <i>-->
          <!--            <img src="../../../assets/admin_slices/计划.png" alt="">-->
          <!--          </i>-->
          <span>{{ generateTitle(item) }}</span>
        </template>
        <template v-for="(child, cindex) in item[childrenKey]">
          <el-submenu :index="child.id" :show-timeout="500" :hide-timeout="500" style="padding-left: 0px;" class="111"
            v-if="generateTitle(child) && child.children.length">
            <template slot="title">
              {{
                  generateTitle(child)
              }}
            </template>
            <template v-for="(child1, cindex1) in child[childrenKey]">
              <el-menu-item :index="child1.id" :show-timeout="500" :hide-timeout="500" @click="open(child1)">
                {{
                    generateTitle(child1)
                }}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="child.id" :show-timeout="500" :hide-timeout="500" @click="open(child)">
            {{
                generateTitle(child)
            }}
          </el-menu-item>
        </template>
      </el-submenu>
      <!--      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"-->
      <!--                    :index="item[pathKey]"-->
      <!--                    @click="open(item)"-->
      <!--                    :key="item[labelKey]"-->
      <!--                    :class="{'is-active':vaildAvtive(item)}">-->
      <!--        <i :class="item[iconKey]"></i>-->
      <!--        <span slot="title"-->
      <!--              :alt="item[pathKey]">{{ generateTitle(item) }}</span>-->
      <!--      </el-menu-item>-->
      <!--      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"-->
      <!--                  :index="item[pathKey]"-->
      <!--                  :key="item[labelKey]" style="padding-left: 0px;">-->
      <!--        <template slot="title" style="padding-left: 0px;">-->
      <!--          &lt;!&ndash;          <i :class="item[iconKey]"></i>&ndash;&gt;-->
      <!--          <i>-->
      <!--            <img src="../../../assets/admin_slices/计划.png" alt="">-->
      <!--          </i>-->

      <!--          <span slot="title"-->
      <!--                :class="{'el-menu&#45;&#45;display':collapse && first}">{{ generateTitle(item) }}</span>-->
      <!--        </template>-->
      <!--        <template v-for="(child,cindex) in item[childrenKey]">-->
      <!--          <el-menu-item :index="child[pathKey]"-->
      <!--                        @click="open(child)"-->

      <!--                        v-if="validatenull(child[childrenKey])"-->
      <!--                        :key="child[labelKey]"-->
      <!--          >-->
      <!--            &lt;!&ndash;            <i :class="child[iconKey]"></i>&ndash;&gt;-->
      <!--            <span slot="title">{{ generateTitle(child) }}</span>-->
      <!--          </el-menu-item>-->
      <!--          <sidebar-item v-else-->
      <!--                        unique-opened="true"-->
      <!--                        :menu="[child]"-->
      <!--                        :key="cindex"-->
      <!--                        :props="props"-->
      <!--                        :screen="screen"-->
      <!--                        :collapse="collapse"></sidebar-item>-->
      <!--        </template>-->
      <!--      </el-submenu>-->

    </template>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { validatenull } from "@/util/validate";
import config from "./config.js";

export default {
  name: "sidebarItem",
  data() {
    return {
      config: config
    };
  },
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    collapse: {
      type: Boolean
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {
    ...mapGetters(["roles"]),
    labelKey() {
      return this.props.label || this.config.propsDefault.label;
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children;
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  methods: {
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item[this.labelKey],
        (item.meta || {}).i18n
      );
    },
    vaildAvtive(item) {
      const groupFlag = (item["group"] || []).some(ele =>
        this.$route.path.includes(ele)
      );
      return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    vaildRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    validatenull(val) {
      return validatenull(val);
    },
    open(item) {
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      this.$router.$avueRouter.group = item.group;
      this.$router.$avueRouter.meta = item.meta;
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey]
        }, item.meta),
        query: item.query
      });
    }
  }
};
</script>

<style scoped>
/deep/ .el-submenu__title {}
</style>
